<template>
  <div class="w-full">
    <div class="flex items-center my-1">
      <BaseTitle id="tab4" title="手术信息" class="-ml-8 !w-[90px] !mb-0" />
    </div>
    <div class="py-2 w-full max-h-[700px] overflow-auto">
      <BaseTable :columns="operationColumns" :data-source="tableList.ssxx" size="small" bordered :row-class-name="getRowClass" :scroll="{ x: 2300 }">
        <template #headerCell="{ column }">
          <div v-if="column.dataIndex === 'operationType'">
            <div class="p-2">手术及操作类型<span class="text-red-500">*</span></div>
          </div>
          <div v-if="column.dataIndex === 'oprCode'">
            <div class="p-2">手术及操作编码<span class="text-red-500">*</span></div>
          </div>
          <div v-if="column.dataIndex === 'oprDate'">
            <div class="p-2">手术及操作日期<span class="text-red-500">*</span></div>
          </div>
          <div v-if="column.dataIndex === 'oprDoctorName'">
            <div class="border-b p-2">手术及操作医师</div>
            <div class="flex">
              <div class="p-2 flex-1 border-r">术者<span class="text-red-500">*</span></div>
              <div class="p-2 flex-1 border-r">一助</div>
              <div class="p-2 flex-1">二助</div>
            </div>
          </div>
          <div v-if="column.dataIndex === 'cutLevel'">
            <div class="border-b p-2">切口等级</div>
            <div class="p-2">切口愈合类别</div>
          </div>
          <div v-if="column.dataIndex === 'anaesName'">
            <div class="border-b p-2">麻醉方式</div>
            <div class="p-2">麻醉医生</div>
          </div>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'operationType'">
            <EditCell title="手术及操作类型">
              <a-select v-model:value="record.operationType" placeholder="请选择" class="w-[120px]" allow-clear>
                <a-select-option value="1">主要</a-select-option>
                <a-select-option value="0">其他</a-select-option>
              </a-select>
            </EditCell>
          </template>
          <template v-if="column.dataIndex === 'oprDate'">
            <EditCell title="手术操作日期">
              <a-date-picker v-model:value="record.oprDate" value-format="YYYY-MM-DD" placeholder="请选择" />
            </EditCell>
          </template>
          <template v-if="column.dataIndex === 'oprLevelName'">
            <EditCell title="手术级别">
              <SelectItem v-model:value="record.oprLevelCode" type="DT00034" placeholder="请选择" style-class="w-[120px]" />
            </EditCell>
          </template>
          <template v-if="column.dataIndex === 'oprName'">
            <EditCell title="手术名称" class="relative">
              <SelectTable v-model:value="record.oprName" type="病案手术" @select=";(record.oprCode = $event.icd9Code), (record.oprName = $event.icd9Name)" />
              <template v-if="record?.originalOprName && record?.originalOprName !== record?.oprName">
                <a-popover placement="top">
                  <template #content>
                    <p class="p-3">{{ record.originalOprName }}</p>
                  </template>
                  <img src="../../../assets/images/bingAn.png" class="absolute top-8 right-5 cursor-pointer w-[20px] h-[22px]" alt="" />
                </a-popover>
              </template>
            </EditCell>
          </template>
          <template v-if="column.dataIndex === 'oprStartTime'">
            <EditCell title="手术开始时间">
              <a-date-picker
                v-model:value="record.oprStartTime"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择"
              />
            </EditCell>
          </template>
          <template v-if="column.dataIndex === 'oprEndTime'">
            <EditCell title="手术结束时间">
              <a-date-picker v-model:value="record.oprEndTime" show-time format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择" />
            </EditCell>
          </template>
          <template v-if="column.dataIndex === 'oprAptmPartList'">
            <EditCell title="部位">
              <!-- <a-select v-model:value="record.oprAptmPartList" placeholder="请选择" :options="positionList" mode="multiple" :max-tag-count="1" allow-clear /> -->
              <SelectPartTags
                :value="{ partCode: record.oprAptmPartList, partName: record.oprAptmParts }"
                multiple
                allow-clear
                show-new
                :input-or-textarea="true"
                type="部位"
                @select=";(record.oprAptmPartList = $event.partCode), (record.oprAptmParts = $event.partName)"
              />
            </EditCell>
          </template>
          <template v-if="column.dataIndex === 'oprDoctorName'">
            <EditCell title="手术及操作医师-术者">
              <SelectTable
                v-model:value="record.oprDoctorName"
                type="医生"
                @select=";(record.oprDoctor = $event.empId), (record.oprDoctorName = $event.empName)"
              />
            </EditCell>
          </template>
          <template v-if="column.dataIndex === 'firstNurseName'">
            <EditCell title="一助">
              <SelectTable
                v-model:value="record.firstNurseName"
                type="医生"
                @select=";(record.firstNurse = $event.empId), (record.firstNurseName = $event.empName)"
              />
            </EditCell>
          </template>
          <template v-if="column.dataIndex === 'secondNurseName'">
            <EditCell title="二助">
              <SelectTable
                v-model:value="record.secondNurseName"
                type="医生"
                @select=";(record.secondNurse = $event.empId), (record.secondNurseName = $event.empName)"
              />
            </EditCell>
          </template>
          <template v-if="column.dataIndex === 'cutLevel'">
            <EditCell title="切口等级" class="!h-1/2">
              <SelectItem v-model:value="record.cutLevelCode" type="DT00035" placeholder="请选择" />
            </EditCell>
            <EditCell title="切口愈合类别" class="!h-1/2 !top-[50%] border-t">
              <SelectItem v-model:value="record.healingCategoryName" value-key="dictItemName" type="heal_lv_code" placeholder="请选择" />
            </EditCell>
          </template>
          <template v-if="column.dataIndex === 'anaesName'">
            <EditCell title="麻醉方式" class="!h-1/2">
              <SelectItem v-model:value="record.anaesCode" type="DT00012" placeholder="请选择" />
            </EditCell>
            <EditCell title="麻醉医生" class="!h-1/2 !top-[50%] border-t">
              <SelectTable
                v-model:value="record.anaesDoctorName"
                type="医生"
                @select=";(record.anaesDoctor = $event.empId), (record.anaesDoctorName = $event.empName)"
              />
            </EditCell>
          </template>
          <template v-if="column.dataIndex === 'asaCode'">
            <EditCell title="麻醉分级">
              <SelectItem v-model:value="record.asaCode" type="anst_lv_code" placeholder="请选择" />
            </EditCell>
          </template>
          <template v-if="column.dataIndex === 'oprRecord'">
            <EditCell :title="record.oprRecord">
              <a-input v-model:value="record.oprRecord" placeholder="请输入" />
            </EditCell>
          </template>
          <!-- <template v-if="column.dataIndex === 'aptmDeptName'">
            <EditCell title="科室">
              <a-select v-model:value="record.aptmDeptCode" placeholder="请选择" :options="departmentList" :field-names="{ label: 'ksmc', value: 'ksdm' }" />
            </EditCell>
          </template> -->

          <template v-if="column.dataIndex === 'action'">
            <a-button type="text" ghost danger :disabled="params.status === 1" @click="onClickDelete(record)"> 删除 </a-button>
          </template>
        </template>
      </BaseTable>
    </div>
    <div class="flex justify-center bottom-0 py-4">
      <a-button type="primary" class="ml-2" ghost @click="onClickAdd"> 新增一行 </a-button>
      <a-button type="primary" class="ml-2" :disabled="params.status === 1" ghost @click="onClickExtract"> 抽取数据 </a-button>
    </div>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
// import { ExclamationOutlined } from '@ant-design/icons-vue'
import BaseTable from '@/components/BaseTable'
import EditCell from '@/components/EditCell'
import { post } from '@/utils/request'

// const emit = defineEmits(['success'])
const props = defineProps({
  params: {
    type: Object,
    default: () => ({})
  },
  inplsh: {
    type: String,
    default: ''
  }
})

// const positionList = ref([])
const tableList = ref({})

const customRender = ({ record, column }) => {
  const dataValue = record[column.dataIndex]
  const subDataValue = record[column.subDataIndex]
  return h('div', { class: 'w-full' }, [
    h('div', { class: 'border-b p-2 h-10 truncate', title: dataValue }, dataValue),
    h('div', { class: 'p-2 h-10 truncate', title: subDataValue }, subDataValue)
  ])
}

const operationColumns = [
  { title: '手术及操作类型', dataIndex: 'operationType', width: 90 },
  { title: '手术及操作编码', dataIndex: 'oprCode', width: 125 },
  { title: '手术及操作日期', dataIndex: 'oprDate', width: 125 },
  { title: '手术级别', dataIndex: 'oprLevelName', width: 100 },
  { title: '手术及操作名称', dataIndex: 'oprName', width: 300 },
  { title: '手术开始时间', dataIndex: 'oprStartTime', width: 160 },
  { title: '手术结束时间', dataIndex: 'oprEndTime', width: 160 },
  { title: '部位', dataIndex: 'oprAptmPartList', width: 120 },
  {
    title: '手术及操作医师',
    dataIndex: 'oprDoctorName',
    colSpan: 3,
    width: 100
  },
  {
    title: '一助',
    colSpan: 0,
    dataIndex: 'firstNurseName',
    width: 100
  },
  {
    title: '二助',
    colSpan: 0,
    dataIndex: 'secondNurseName',
    width: 100
  },

  {
    title: '切口等级',
    dataIndex: 'cutLevel',
    subTitle: '切口愈合类别',
    subDataIndex: 'healingCategoryName',
    width: 120,
    customCell: () => ({ class: '!p-0' }),
    customRender
  },
  {
    title: '麻醉方式',
    dataIndex: 'anaesName',
    subTitle: '麻醉医生',
    subDataIndex: 'anaesDoctorName',
    width: 120,
    customCell: () => ({ class: '!p-0' }),
    customRender
  },
  { title: '麻醉分级', dataIndex: 'asaCode', width: 120 },
  { title: '手术经过', dataIndex: 'oprRecord', width: 160 },
  // { title: '手术科室', dataIndex: 'aptmDeptName', width: 160 },
  { title: '操作', dataIndex: 'action', fixed: 'right', width: 80 }
]

const getRowClass = (record) => {
  if (record.oprName && !record.oprCode) {
    return 'red-font-row' // 返回一个类名，当 oprCode 为空时给当前行添加该类
  }
  return ''
}

// 新增一条
const onClickAdd = () => {
  const key = `row-${tableList.value.ssxx.length}`
  tableList.value.ssxx.push({ key, oprName: '' })
}

// 抽取
const onClickExtract = async () => {
  const { code, data, msg } = await post('/med/MedicalRecord/getssxx', { inplsh: props.inplsh })
  if (code !== 0) return message.error(msg)
  data.length && (tableList.value.ssxx = data)
  tableList.value.ssxx.forEach((item) => {
    if (!item.oprAptmPartList) {
      item.oprAptmPartList = []
    }
  })
}

const onClickDelete = (row) => {
  if (row.key) {
    tableList.value.ssxx = tableList.value.ssxx.filter((item) => item.key !== row.key)
  } else {
    tableList.value.ssxx = tableList.value.ssxx.filter((item) => item.id !== row.id)
  }
}

//获取部位集合
// const getPositionList = async () => {
//   const { code, data } = await post('/operation/opex/getDictPartList', {
//     zjm: '',
//     pageNum: 1,
//     pageSize: 999
//   })
//   if (code !== 0) return
//   positionList.value = data.map((item) => {
//     return {
//       value: item.id,
//       label: item.partName
//     }
//   })
// }

// 获取科室
// const departmentList = ref([])
// const getDepartmentList = async () => {
//   const { code, data } = await post('/outp/mzdj/getDeptInfoList', { sfylks: '0' })
//   if (code !== 0) return
//   departmentList.value = data
// }

watch(
  () => props.params,
  () => {
    tableList.value = props.params
  },
  {
    immediate: true
  }
)

// onMounted(() => {
//   // getDepartmentList()
//   // getPositionList()
// })
</script>

<style lang="less" scoped>
.can-edit-cell {
  :deep(.ant-select-selector) {
    border-bottom: none !important;
    &:hover {
      border: 1px solid var(--primary-color) !important;
    }
  }
}

.red-font-row .can-edit-cell {
  :deep(.ant-select-selector) {
    color: red !important; /* 将字体颜色设置为红色 */
  }
  :deep(.ant-input) {
    color: red !important; /* 将字体颜色设置为红色 */
  }
  :deep(.ant-picker-input > input) {
    color: red !important; /* 将字体颜色设置为红色 */
  }
}

:deep(.ant-table-row) {
  height: 80px !important;
}

:deep(.ant-table-thead) {
  tr > th:nth-child(7),
  tr > th:nth-child(8),
  tr > th:nth-child(9) {
    padding: 0 !important;
  }
}
</style>
